/* 设置整个页面的基本样式 */
body{
    background-color: #080b30; /* 统一页面底色 */
    margin: 0; /* 移除页面默认边距 */
    width: 100%;
    height: 100%; /* 确保高度为100% */
    overflow: hidden; /* 防止内容溢出 */
    zoom: 100%; /* 强制缩放为100% */
}

#logo{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 30%;
    height: 10%;
    background-color: #080b30;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px; 
}

/* 标题区域样式 */
#title{
    position: absolute; /* 使用绝对定位 */
    top: 0; /* 距离顶部0像素 */
    left: 30%; /* 距离左侧30% */
    width: 40%; /* 宽度为40% */
    height: 10%; /* 高度为10% */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    color: white; /* 文字颜色为白色 */
    font-size: 30px; /* 字体大小30像素 */
    font-weight: bold;
}

/* 时间显示区域样式 */
/* 时间显示区域样式 */
#time{
    position: absolute; /* 使用绝对定位，使元素脱离文档流，可以精确控制位置 */
    top: 0; /* 距离顶部0像素，确保时间显示在容器最上方 */
    right: 0; /* 距离右侧0像素，使时间显示靠右对齐 */
    width: 25%; /* 设置宽度为父容器的25%，确保有足够空间显示时间 */
    height: 10%; /* 设置高度为父容器的10%，与标题区域保持一致 */
    font-size: 18px; /* 设置字体大小为18像素，确保时间清晰可读 */
    color: #fff; /* 设置文字颜色为白色，与深色背景形成对比 */
    text-align: right; /* 文字右对齐，使时间显示更整齐 */
    padding: 10px; /* 设置内边距为10像素，让文字与边框保持适当距离 */
    border-radius: 5px; /* 设置圆角为5像素，使外观更现代化 */
    margin: 10px; /* 设置外边距为10像素，与其他元素保持适当间距 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果，增加立体感 */
    box-sizing: border-box; /* 确保padding和border包含在width和height内，防止溢出 */
    overflow: hidden; /* 隐藏超出容器的内容，防止布局破坏 */
    white-space: nowrap;
            /* 取消背景颜色 */
    background-color: transparent; 
}
/* 左侧第一个区域样式 */
#left1{
    position: absolute; /* 使用绝对定位 */
    top: 10%; /* 距离顶部10% */
    left: 0; /* 距离左侧0像素 */
    width: 30%; /* 宽度为30% */
    height: 45%; /* 高度为45% */
}

/* 左侧第二个区域样式 */
#left2{
    position: absolute; /* 使用绝对定位 */
    top: 55%; /* 距离顶部55% */
    left: 0; /* 距离左侧0像素 */
    width: 30%; /* 宽度为30% */
    height: 45%; /* 高度为45% */
}

/* 中间第一个区域样式 */
#center1{
    position: absolute; /* 使用绝对定位 */
    top: 10%; /* 距离顶部10% */
    left: 30%; /* 距离左侧30% */
    width: 40%; /* 宽度为40% */
    height: 15%; /* 高度为15% */
}

/* 中间区域数字样式 */
.center1-num{
    width: 25%; /* 宽度为25% */
    height: 50%; /* 高度为50% */
    float: left; /* 左浮动 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    color: yellow; /* 文字颜色为黄色 */
    font-size: 20px; /* 字体大小20像素 */
}

/* 中间区域文字样式 */
.center1-txt{
    width: 25%; /* 宽度为25% */
    float: left; /* 左浮动 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-family: '微软雅黑'; /* 使用微软雅黑字体 */
    color: white; /* 文字颜色为白色 */
    font-size: 10px; /* 字体大小10像素 */
}

/* 中间第二个区域样式 */
#center2{
    position: absolute; /* 使用绝对定位 */
    top: 25%; /* 距离顶部25% */
    left: 30%; /* 距离左侧30% */
    width: 40%; /* 宽度为40% */
    height: 50%; /* 高度为50% */
}

/* 中间第三个区域样式 */
#center3{
    position: absolute; /* 使用绝对定位 */
    top: 75%; /* 距离顶部75% */
    left: 30%; /* 距离左侧30% */
    width: 40%; /* 宽度为40% */
    height: 25%; /* 高度为25% */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 右侧第一个区域样式 */
#right1{
    position: absolute; /* 使用绝对定位 */
    top: 10%; /* 距离顶部10% */
    left: 70%; /* 距离左侧70% */
    width: 30%; /* 宽度为30% */
    height: 45%; /* 高度为45% */
}

/* 右侧第二个区域样式 */
#right2{
    position: absolute; /* 使用绝对定位 */
    top: 55%; /* 距离顶部55% */
    left: 70%; /* 距离左侧70% */
    width: 30%; /* 宽度为30% */
    height: 45%; /* 高度为45% */
}

/* 整体背景颜色 */
body {
    background-color: #080b30;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 标题区域 */
#title {
    font-size: 36px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: fadeInUp 1s ease-out;
}

/* 时间显示区域 */
#time {
    border-radius: 10px;
    animation: fadeInRight 1s ease-out;
}

/* 左侧区域 */
#left1, #left2 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    margin: 10px;
    animation: fadeInLeft 1s ease-out;
}

/* 中间区域 */
#center1 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    margin: 10px;
    animation: fadeInUp 1s ease-out;
}

.center1-num h1 {
    font-size: 30px;
    color: #ffd700;
}

.center1-txt h1 {
    font-size: 14px;
    color: #ccc;
}

#center2, #center3 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    margin: 10px;
    animation: fadeInUp 1s ease-out;
}

/* 右侧区域 */
#right1, #right2 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    margin: 10px;
    animation: fadeInRight 1s ease-out;
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}